<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {padding:0;margin:0;box-sizing:border-box;}
    *:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
    body {font-size: 14px;}
    .title-l {font-size: 18px;line-height: 40px;margin-bottom: 10px;}
    .checkbox {margin-bottom: 30px;}

/*颜色*/
:root{--dark:#5d677c;--dark-hover:#384253;--tpl:#525CE5;--tpl-hover:#7773d7;--default:#8783e1;--default-hover:#7773d7;--red:#f1716c;--red-hover:#d15451;--orange:#f57e00;--orange-hover:#cf6c03;--yellow:#fac413;--yellow-hover:#e9b712;--green:#26bc5c;--green-hover:#179b47;--cyan:#8cd03d;--cyan-hover:#7dc22d;--blue:#768fe7;--blue-hover:#677ecf;--purple:#9e83e1;--purple-hover:#896eca;--white:#ffffff;--white-hover:#f5f5f5;--gray:#b2b2b2;--gray-hover:#989898;--black:#4a4a4a;--black-hover:#000000;}

/* 栅格布局 */
.ui-row {display: flex;flex-wrap:wrap;}
.ui-row > div {box-sizing: border-box;}
.ui-col-space10 {margin:-5px;}
.ui-col-space10>* {padding:5px;}
.ui-col-space12 {margin:-6px;}
.ui-col-space12>* {padding:6px;}
.ui-col-space14 {margin:-7px;}
.ui-col-space14>* {padding:7px;}
.ui-col-space16 {margin:-8px;}
.ui-col-space16>* {padding:8px;}
.ui-col-space18 {margin:-9px;}
.ui-col-space18>* {padding:9px;}
.ui-col-space20 {margin:-10px;}
.ui-col-space20>* {padding:10px;}
.ui-col-space30 {margin:-15px;}
.ui-col-space30>* {padding:15px;}
.ui-col-sm1,.ui-col-sm2,.ui-col-sm3,.ui-col-sm4,.ui-col-sm5,.ui-col-sm6,.ui-col-sm7,.ui-col-sm8,.ui-col-sm9,.ui-col-sm10,.ui-col-sm11,.ui-col-sm12,
.ui-col-md1,.ui-col-md2,.ui-col-md3,.ui-col-md4,.ui-col-md5,.ui-col-md6,.ui-col-md7,.ui-col-md8,.ui-col-md9,.ui-col-md10,.ui-col-md11,.ui-col-md12,
.ui-col-lg1,.ui-col-lg2,.ui-col-lg3,.ui-col-lg4,.ui-col-lg5,.ui-col-lg6,.ui-col-lg7,.ui-col-lg8,.ui-col-lg9,.ui-col-lg10,.ui-col-lg11,.ui-col-lg12 {
    width:100%;
    position: relative;
    display: block;
    box-sizing: border-box
}
@media screen and (min-width:800px) {
    .ui-col-sm1 {width:8.33%;}
    .ui-col-sm2 {width:16.66%;}
    .ui-col-sm3 {width:25%;}
    .ui-col-sm4 {width:33.33%;}
    .ui-col-sm5 {width:41.66%;}
    .ui-col-sm6 {width:50%;}
    .ui-col-sm7 {width:58.33%;}
    .ui-col-sm8 {width:66.66%;}
    .ui-col-sm9 {width:75%;}
    .ui-col-sm10 {width:83.33%;}
    .ui-col-sm11 {width:91.66%;}
    .ui-col-sm12 {width:100%;}
}
@media screen and (min-width:1000px) {
    .ui-col-md1 {width:8.33%;}
    .ui-col-md2 {width:16.66%;}
    .ui-col-md3 {width:25%;}
    .ui-col-md4 {width:33.33%;}
    .ui-col-md5 {width:41.66%;}
    .ui-col-md6 {width:50%;}
    .ui-col-md7 {width:58.33%;}
    .ui-col-md8 {width:66.66%;}
    .ui-col-md9 {width:75%;}
    .ui-col-md10 {width:83.33%;}
    .ui-col-md11 {width:91.66%;}
    .ui-col-md12 {width:100%;}
}
@media screen and (min-width:1300px) {
    .ui-col-lg1 {width:8.33%;}
    .ui-col-lg2 {width:16.66%;}
    .ui-col-lg3 {width:25%;}
    .ui-col-lg4 {width:33.33%;}
    .ui-col-lg5 {width:41.66%;}
    .ui-col-lg6 {width:50%;}
    .ui-col-lg7 {width:58.33%;}
    .ui-col-lg8 {width:66.66%;}
    .ui-col-lg9 {width:75%;}
    .ui-col-lg10 {width:83.33%;}
    .ui-col-lg11 {width:91.66%;}
    .ui-col-lg12 {width:100%;}
}

.ui-col-sm2 p {background: var(--blue);height:50px;line-height: 50px;color:#fff;text-align: center;}
.ui-col-md3 p {background: var(--green);height:50px;line-height: 50px;color:#fff;text-align: center;}
.ui-col-lg6 p {background: var(--gray);height:50px;line-height: 50px;color:#fff;text-align: center;}

</style>
</head>
<body>

<div style="padding:100px;">

<div class="ui-row ui-col-space20">
    <div class="ui-col-sm2"><p>ui-col-sm2</p></div>
    <div class="ui-col-sm2"><p>ui-col-sm2</p></div>
    <div class="ui-col-sm2"><p>ui-col-sm2</p></div>
    <div class="ui-col-sm2"><p>ui-col-sm2</p></div>
</div>

<div class="ui-row ui-col-space20">
    <div class="ui-col-md3"><p>ui-col-md3</p></div>
    <div class="ui-col-md3"><p>ui-col-md3</p></div>
    <div class="ui-col-md3"><p>ui-col-md3</p></div>
    <div class="ui-col-md3"><p>ui-col-md3</p></div>
</div>

<div class="ui-row ui-col-space20">
    <div class="ui-col-lg6"><p>ui-col-lg6</p></div>
    <div class="ui-col-lg6"><p>ui-col-lg6</p></div>
    <div class="ui-col-lg6"><p>ui-col-lg6</p></div>
    <div class="ui-col-lg6"><p>ui-col-lg6</p></div>
</div>

</div>
</body>
</html>